/*
 *@description:宫格跳转之后的项目详情页面
 *@Author:@rennan
 *@Date:2023-12-27 10:53:20
 *@version: V1.0.0
*/
<template>
  <div class="detail">
    <!-- 项目详情页面 -- {{ $route.params }} -->
    <van-nav-bar title="家政分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 家政详情布局盒子 -->
    <div class="detail_box">
      <!-- 左边导航 -->
      <div class="left_box">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
        </van-sidebar>
      </div>
      <!-- 右边详情 -->
      <div class="right_box">
        <van-card v-for="item in cardList" :key="item.id" :num="item.count" :price="item.price" :desc="item.description" :title="item.name" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
          <template #footer>
            <van-button :disabled="isAble" size="mini" @click="subCount(item.id)">-</van-button>
            <input class="ipt" type="text" v-model="item.count">
            <van-button size="mini" @click="addCount(item.id)">+</van-button>
          </template>
        </van-card>
        <div class="submit_bar">
          <van-submit-bar class="submit_btn" :price="totalPrice" button-text="提交订单" @submit="onSubmit" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import ProductCard from '@/components/ProductCard/index.vue'
export default {
  data() {
    return {
      isAble:true,
      activeKey: 0,
      cardList: [
        {
          id: 1001,
          name: '地板护理',
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          description: '...',
          price: 120,
          count: 0
        },
        {
          id: 1002,
          name: '楼梯清洗',
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          description: '...',
          price: 120,
          count: 0
        }
      ],
      totalPrice:0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    subCount(id){
      let count = this.cardList.filter(item=>item.id==id )[0].count
      if(count == 0){
        this.isAble = true
      }
      if(count>0){
        this.cardList.filter(item=>item.id==id )[0].count--
      }
    },
    addCount(id){
      console.log(id);
      this.cardList.filter(item=>item.id==id )[0].count++
      let count = this.cardList.filter(item=>item.id == id)[0].count
      let price = this.cardList.filter(item=>item.id == id)[0].price
      console.log(count, price);
      this.totalPrice += count * price *100
      this.isAble = false
    },
    onSubmit(){

    }
  },
  // components:{
  //   ProductCard
  // }
}
</script>
<style scoped>
.detail_box {
  display: flex;
}

.right_box {
  flex: 1;
}

.van-sidebar {
  width: 150px;
  text-align: center;
}

.ipt {
  width:28px;
  height:28px;
  border:0;
  background-color:#f2f3f5;
  margin:0px 2px;
  text-align:center;
}
.van-button {
  border:0;
  width:28px;
  height:28px;
  font-size:20px;
  background-color:#f2f3f5;
}
.van-sidebar-item--select::before {
  background-color: #8430ff;
}

.van-submit-bar {
  position: absolute;
  bottom: 65px;
}
.submit_btn .van-button{
  width: 110px;
  height: 40px;
  color: #fff;
  background:  rgb(132, 48, 255);
  background-color: rgb(132, 48, 255);
}
</style>